<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <div class="data-box-left">
        <!-- <projectMsg :projectId="dataObj.project_id" :hrefProject="true" type="contractManagement"></projectMsg> -->
        <div class="user-title-box" v-if="$fieldShowFunc('13-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border v-if="dataObj">
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('ht_xmmc')">
            <div slot="label" class="justify_6">项目名称</div>
            {{ dataObj.project_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('ht_xmbh')">
            <div slot="label" class="justify_6">项目编号</div>
            <span class="click-color" @click="hrefProjectFunc">{{ dataObj.project_number }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('ht_xmpp')">
            <div slot="label" class="justify_6">项目品牌</div>
            {{ dataObj.brand_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('ht_xmlx')">
            <div slot="label" class="justify_6">项目类型</div>
            {{ dataObj.store_type_name }}
          </el-descriptions-item>
          <!-- 合同详情 -->
          <el-descriptions-item label="已付金额" v-if="$fieldShowFunc('ht_yfje')">
            <div slot="label" class="justify_6">已付金额</div>
            {{ dataObj.paid_amount }}元
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 2, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('13-htxx')">合同信息
          <el-button class="btn-box" type="primary" @click="contractInvalidation"
            v-if="dataObj.contract_state == 1 && $isPer(permission, ['contract_contractInvalidation'])">作废合同</el-button>
        </div>
        <el-descriptions class="margin-bottom" :column="3" border v-if="dataObj">
          <el-descriptions-item label="合同类型" v-if="$fieldShowFunc('ht_htlx')">
            <div slot="label" class="justify_6">合同类型</div>
            <span v-if="dataObj.contract_type == 1">施工合同</span>
            <span v-if="dataObj.contract_type == 2">勘场合同</span>
            <span v-if="dataObj.contract_type == 3">增减项合同</span>
            <span v-if="dataObj.contract_type == 4">定金合同</span>
          </el-descriptions-item>
          <el-descriptions-item label="主体账号" v-if="$fieldShowFunc('ht_qyzt')">
            <div slot="label" class="justify_6">主体账号</div>
            {{ dataObj.account_name || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="合同编号" v-if="$fieldShowFunc('ht_htbh')">
            <div slot="label" class="justify_6">合同编号</div>
            {{ dataObj.contract_number || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="合同签约日期" v-if="$fieldShowFunc('ht_htqyrq')">
            <div slot="label" class="justify_6">合同签约日期</div>
            {{ dataObj.signing_date || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="合同开工日期"
            v-if="$fieldShowFunc('ht_hekgrq') && (dataObj.contract_type == 1 || dataObj.contract_type == 3)">
            <div slot="label" class="justify_6">合同开工日期</div>
            {{ dataObj.contract_commencement_date || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="合同完工日期"
            v-if="$fieldShowFunc('ht_hewgrq') && (dataObj.contract_type == 1 || dataObj.contract_type == 3)">
            <div slot="label" class="justify_6">合同完工日期</div>
            {{ dataObj.contract_completion_date || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="合同工期"
            v-if="$fieldShowFunc('ht_htgq') && (dataObj.contract_type == 1 || dataObj.contract_type == 3)">
            <div slot="label" class="justify_6">合同工期</div>
            {{
              dataObj.contract_duration_days
                ? dataObj.contract_duration_days + "天"
                : "--"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="签约金额" v-if="$fieldShowFunc('ht_heqyje')">
            <div slot="label" class="justify_6">签约金额</div>
            {{
              dataObj.contract_price ? dataObj.contract_price + "元" : "--"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="首期款" v-if="$fieldShowFunc('ht_sqkje') && dataObj.contract_type == 1">
            <div slot="label" class="justify_6">首期款</div>
            {{ dataObj.down_payment ? dataObj.down_payment + "元" : "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="进度款" v-if="$fieldShowFunc('ht_jdkje') && dataObj.contract_type == 1">
            <div slot="label" class="justify_6">进度款</div>
            {{
              dataObj.progress_payment
                ? dataObj.progress_payment + "元"
                : "--"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="尾款" v-if="$fieldShowFunc('ht_wkje') && dataObj.contract_type == 1">
            <div slot="label" class="justify_6">尾款</div>
            {{
              dataObj.balance_payment ? dataObj.balance_payment + "元" : "--"
            }}
          </el-descriptions-item>
          <el-descriptions-item label="合同备注" v-if="$fieldShowFunc('ht_htbz')">
            <div slot="label" class="justify_6">合同备注</div>
            {{ dataObj.remark || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="合同状态" v-if="$fieldShowFunc('ht_htzt')">
            <div slot="label" class="justify_6">合同状态</div>
            {{ dataObj.contract_state == 1 ? "已签约" : "已作废" }}
          </el-descriptions-item>
          <el-descriptions-item label="合同创建时间" v-if="$fieldShowFunc('ht_cjsj')">
            <div slot="label" class="justify_6">合同创建时间</div>
            {{ dataObj.created_at || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="合同创建人" v-if="$fieldShowFunc('ht_htcjr')">
            <div slot="label" class="justify_6">合同创建人</div>
            {{ dataObj.handlers_name || "--" }}
          </el-descriptions-item>
          <el-descriptions-item label="合同附件" v-if="$fieldShowFunc('ht_htfj')">
            <div slot="label" class="justify_6">合同附件</div>
            <div class="file-box-img-box flex ac">
              <template v-for="(file, idx) in dataObj.contract_files">
                <div class="file-box-img" :key="idx">
                  <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top">
                    <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                  </el-tooltip>
                </div>
              </template>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="报价单" v-if="$fieldShowFunc('ht_htbjd')">
            <div slot="label" class="justify_6">报价单</div>
            <div class="file-box-img-box flex ac">
              <div class="file-box-img" v-if="dataObj.quotation_file">
                <el-tooltip class="item" effect="dark" :content="dataObj.quotation_file?.file_name" placement="top">
                  <img @click="$fileViewHandle(dataObj.quotation_file)" class="img"
                    :src="$fileImgFunc(dataObj.quotation_file)" />
                </el-tooltip>
              </div>
              <span v-else>--</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="利润单" v-if="$fieldShowFunc('ht_htlrd')">
            <div slot="label" class="justify_6">利润单</div>
            <div class="file-box-img-box flex ac">
              <div class="file-box-img" v-if="dataObj.profit_statement_file">
                <el-tooltip class="item" effect="dark" :content="dataObj.profit_statement_file?.file_name"
                  placement="top">
                  <img @click="$fileViewHandle(dataObj.profit_statement_file)" class="img"
                    :src="$fileImgFunc(dataObj.profit_statement_file)" />
                </el-tooltip>
              </div>
              <span v-else>--</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="工程量清单" v-if="$fieldShowFunc('ht_htgclqd')">
            <div slot="label" class="justify_6">工程量清单</div>
            <div class="file-box-img-box flex ac">
              <div class="file-box-img" v-if="dataObj.cost_list_file">
                <el-tooltip class="item" effect="dark" :content="dataObj.cost_list_file?.file_name" placement="top">
                  <img @click="$fileViewHandle(dataObj.cost_list_file)" class="img"
                    :src="$fileImgFunc(dataObj.cost_list_file)" />
                </el-tooltip>
              </div>
              <span v-else>--</span>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="签约报价单"
            v-if="$fieldShowFunc('ht_qybjd') && $isPer(permission, ['contractDetail_ysDetail']) && (dataObj.contract_type == 1 || dataObj.contract_type == 3)">
            <div slot="label" class="justify_6">签约报价单</div>
            <span class="click-color" @click="quotationFunc">点击查看</span>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(0, 2, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>
<script>
import proContractApi from "@/api/proContractApi";
import projectMsg from "@/components/ProjectMsg";

export default {
  name: 'contractDetailPage',
  components: {
    projectMsg,
  },
  data() {
    return {
      dataObj: "",
      permission: [],//操作权限
    };
  },
  computed: {},
  mounted() {
    // 操作权限
    this.$getHtmlAuthority('/contractManagement').then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.getContractDetails(); //合同详情
  },
  methods: {
    // 报价单详情
    quotationFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/budgetDetailPage',
        query: {
          id: this.dataObj.project_id
        }
      })
    },
    // 作废合同
    contractInvalidation() {
      this.$confirm("此操作将废弃该合同, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          proContractApi
            .contractInvalidation({
              id: this.$route.query.id,
            })
            .then((res) => {
              console.log(res, "合同作废");
              if (res.code == 200) {
                this.getContractDetails(); //合同详情
              }
              this.$message({
                type: res.code == 200 ? "success" : "warning",
                message: res.message,
              });
            });
        })
        .catch(() => { });
    },
    // 合同详情
    getContractDetails() {
      if (!this.$route.query.id) return;
      proContractApi
        .getContractDetails({
          contract_id: this.$route.query.id,
        })
        .then((res) => {
          console.log(res, "合同详情");
          if (res.code == 200) {
            this.dataObj = res.data;
          }
        });
    },

    hrefProjectFunc() {
      this.$router.push({ path: '/projectDetailNew', query: { id: this.dataObj.project_id } })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import "@/styles/detail.scss";
</style>
<style lang="scss">
.labelClassName3 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
  opacity: 0;
}

.contentClassName3 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
  opacity: 0;
}
</style>